<!-- 小团在线-已办事项公开详情 -->
<template>
  <div class="container">
      <div class="card">
          <div class="title">代办信息</div>
          <div class="table">
              <div class="item">
                  <div class="label">代办事项</div>
                  <div class="content">{{info.content}}</div>
              </div>
              <div class="item">
                  <div class="label">姓名</div>
                  <div class="content">{{info.name}}</div>
              </div>
              <div class="item">
                  <div class="label">联系电话</div>
                  <div class="content">{{info.phone}}</div>
              </div>
              <div class="item">
                  <div class="label">申请时间</div>
                  <div class="content">{{info.createDate}}</div>
              </div>
              <div class="item">
                  <div class="label">代办内容</div>
                  <div class="content">{{info.details}}</div>
              </div>
              <div class="item">
                  <div class="label">当前状态</div>
                  <div class="content" style="color: #67C23A;">{{info.replyStatusName}}</div>
              </div>
          </div>
      </div>
      <div class="card">
          <div class="title">处理信息</div>
          <div class="table">
              <div class="item">
                  <div class="label">受理部门</div>
                  <div class="content">{{info.acceptDeptName}}</div>
              </div>
              <div class="item">
                  <div class="label">办结时间</div>
                  <div class="content">{{info.updateDate}}</div>
              </div>
              <div class="item">
                  <div class="label">回复内容</div>
                  <div class="content">{{info.reply}}</div>
              </div>
          </div>
      </div>
  </div>
</template>
<script lang="ts">
import { getTransactItemDetailAPI } from "../../../api/tuan";

export default {
  data() {
    return {
      loading: false,
      info: {},
    };
  },
  onLoad(options) {
    let { id } = options;
    this.loading = true;
    wx.showLoading({
      title: "加载中...",
    });
    getTransactItemDetailAPI(id).then((res) => {
      this.info = res.data;
      wx.hideLoading();
      this.loading = false;
    });
  },
};
</script>
<style scoped lang="scss">
@import "../../../assets/scss/common.scss";

.container {
  padding: 15px;
  .card {
      margin-bottom: 20px;
      .title {
          font-size: 17px;
          font-weight: bold;
          margin-bottom: 10px;
          padding-left: 5px;
      }
      .table {
          border: 1px solid #efefef;
          border-left: none;
          .item {
              display: flex;
              justify-content: center;
              align-items: flex-start;
              background-color: #efefef;
              &:first-child {
                  .label {
                      border: none;
                  }
                  .content {
                      border: none;
                  }
              }
              .label {
                  flex: none;
                  width: 100px;
                  height: 100%;
                  text-align: center;
                  padding: 10px 0;
                  border-top: 1px solid #fff;
              }
              .content {
                  flex: auto;
                  background-color: #fff;
                  padding: 10px;
                  border-top: 1px solid #efefef;
              }
          }
      }
  }
}
</style>